<template>
  <div class="home">
    <vue-input @inp="search" @inputFn="inputFn"></vue-input>
    <list :showlist="showlist" :index="index"></list>
  </div>
</template>

<script>
import vueInput from "../components/input.vue";
import list from "../components/list.vue";
export default {
  name: "Home",
  components: {
    vueInput,
    list,
  },
  data() {
    return {
      list: ["宝马", "宝骏", "保时捷", "奥迪", "奥拓", "五菱", "金杯", "QQ"],
      showlist: [], // 搜索结果展示的数组
      index: 1,
      saveInput: ''
    };
  },
  methods: {
    search(val) {
      // 子组件传入的input事件
      // console.log(val);
      this.saveInput = val;
      // console.log(this.saveInput);
      if (val) {
        this.showlist = this.list.filter((item) => item.includes(val));
      } else {
        this.showlist = [];
      }
      // console.log(this.showlist);
    },
    inputFn(val) {
      if (val == "up" && this.index > 0) {
        this.index--;
      }
      if (val == "down" && this.index < this.showlist.length - 1) {
        this.index++;
      }
      if (val == "enter") {
        if (this.showlist.length == 0) {
          this.$router.push({ path: "/about", query: { val: this.saveInput } });
        } else {
          this.$router.push({
            path: "/about",
            query: { val: this.showlist[this.index] },
          });
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.home {
  position: relative;
  height: 100%;
}
</style>
